<!--
- Author:  Lgh.
- Date:    2017/3/4.
- File:    balance.vue.
-->
<template>
  <div class="Web_Box">
    <div class="integrat f-cb"><span>当前余额 ￥{{currentBalance}}</span></div>
    <div class="inter_tab" v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <table width="100%" border="0">
        <tr>
          <th align="left">时间</th>
          <th align="center">收支类型</th>
          <th align="right">金额</th>
        </tr>
        <tr v-for="item in balance.data">
          <td>{{item.addtime | timestampToDate('yyyy-MM-dd')}} <p class="f12">{{item.addtime | timestampToDate('hh:mm:ss')}}</p></td>
          <td align="center" v-show="item.style == 1">购买商品减余额</td>
          <td align="center" v-show="item.style == 2">退货返回余额</td>
          <td align="center" v-show="item.style == 3">取消订单返回余额</td>
          <td align="center" v-show="item.style == 4">退款返回余额</td>
          <td>
            <a class="fr">
              <span class="cr_45a73a vm" v-if="item.style == 2||item.style == 3  || item.style == 4">+{{item.balance_value}}</span>
              <span class="cr_f60202 vm" v-if="item.style == 1">-{{item.balance_value}}</span>
              <span class="vm pl20" @click="gotoOrderDetail(item.order_id)">查看</span>
            </a>
          </td>
        </tr>
      </table>
    </div>
    <empty-data :show="balance.allLoaded && balance.data.length <= 0" style="margin-top: 1.5rem"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>

  export default{
    data() {
      return {
        balance: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 15, data: []}
      }
    },
    components: {},
    created() {
      this.initBalanceList()
      this.getBalanceList(this.balance.page, this.balance.pageSize)
    },
    methods: {
      gotoOrderDetail(id) {
        this.$router.push({name: 'order-detail', params: {id: id}})
      },
      initBalanceList() {
        this.balance.requested = false
        this.balance.loading = false
        this.balance.allLoaded = false
        this.balance.page = 1
        this.balance.pageSize = 15
        this.balance.data = []
        this.currentBalance = 0
      },
      getBalanceList(page, pageSize) {
        this.balance.loading = true
        this.$request.getBalanceList(page, pageSize).then(data => {
          this.currentBalance = data.member_balance
          if (data.balance_list.length < this.balance.pageSize) {
            this.balance.allLoaded = true
          }
          this.balance.data = [...this.balance.data, ...data.balance_list]
        }).finally(() => {
          this.balance.requested = true
          this.balance.loading = false
        })
      },
      loadMore() {
        if (this.balance.loading || this.balance.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getBalanceList(++this.balance.page, this.balance.pageSize)
        }, 500)
      }
    }
  }
</script>
